<template>
  <div class="job" slot="body">
    <Header></Header>

    <el-card class="box-card" style="position: fixed;margin-top:-13px;z-index: 50;">
      <el-row>
        <el-col :span="6" style="padding-top: 10px">
          <span>选择城市：</span>
          <span style="border: none;" v-show="choose_city!=''">{{choose_city}}</span>
          <el-button size="mini" style="margin-left: 10px" type="primary" @click="to_origin()">确定</el-button>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="不想寻找？直接输入城市名" v-model="key_words" class="input-with-select">
            <el-button @click="choose_city = key_words" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" id="hot_job" style="margin-top: 120px">
      <el-row>
        <h3>热门城市</h3>
        <el-col :span="3" v-for="(i,index) in hot_city" :key="index">
          <el-button style="border: none" @click="choose_city=i">{{i}}</el-button>
        </el-col>
      </el-row>
      <el-row v-for="(i,index1) in province_list" :key="index1">
        <h3>{{i.name}}</h3>
        <div v-for="(j,index2) in city_list" :key="index2">
          <el-col :span="3" v-if="j.pid==i.id">
            <el-button style="border: none" @click="choose_city=j.name">{{j.name}}</el-button>
          </el-col>
        </div>

      </el-row>
    </el-card>

    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './Header'
  import Footer from './Footer'

  export default {
    name: 'Area',
    components: {Header, Footer},
    created () {
      this.origin = this.$route.query.origin
      this.$axios.get('http://localhost:8081/area/selectCity').then((res) => {
        const result = res.data
        this.city_list = result
      })
    },
    data () {
      return {
        origin: '',
        key_words: '',
        choose_city: '',
        city_list: '',
        hot_city: ['北京市', '上海市', '广州市', '深圳市', '杭州市', '天津市', '厦门市','重庆市'],
        province_list: [
          {id: '110000', name: '北京市'},
          {id: '120000', name: '天津市'},
          {id: '130000', name: '河北省'},
          {id: '140000', name: '山西省'},
          {id: '150000', name: '内蒙古自治区'},
          {id: '210000', name: '辽宁省'},
          {id: '220000', name: '吉林省'},
          {id: '230000', name: '黑龙江省'},
          {id: '310000', name: '上海市'},
          {id: '320000', name: '江苏省'},
          {id: '330000', name: '浙江省'},
          {id: '340000', name: '安徽省'},
          {id: '350000', name: '福建省'},
          {id: '360000', name: '江西省'},
          {id: '370000', name: '山东省'},
          {id: '410000', name: '河南省'},
          {id: '420000', name: '湖北省'},
          {id: '430000', name: '湖南省'},
          {id: '440000', name: '广东省'},
          {id: '450000', name: '广西壮族自治区'},
          {id: '460000', name: '海南省'},
          {id: '500000', name: '重庆市'},
          {id: '510000', name: '四川省'},
          {id: '520000', name: '贵州省'},
          {id: '530000', name: '云南省'},
          {id: '540000', name: '西藏自治区'},
          {id: '610000', name: '陕西省'},
          {id: '620000', name: '甘肃省'},
          {id: '630000', name: '青海省'},
          {id: '640000', name: '宁夏回族自治区'},
          {id: '650000', name: '新疆维吾尔自治区'},
        ]
      }
    },
    methods: {
      to_origin() {
        this.$router.push({path: this.origin, query: {addr:this.choose_city}})
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .text-card {
    font-size: 15px;
    padding: 10px 0px;
  }
</style>
